上一節介紹完Html Helper後,這一節來介紹ASP.NET CORE MVC新出的Tag Helper
我們先從之前產生的範例碼來找一下哪個是Tag Helper
<label asp-for="Title" class="control-label"></label>
<input asp-for="Title" class="form-control" />
其中asp-for就是Tag Helper
可以看到Tag Helper是依附在原生地html上,再加上asp-for,所以整體的閱讀性跟javascript的搭配性就會很好
這也是我個人比較喜歡的寫法,我個人是能像原生就盡量像原生寫法的那一派,那當然也有人不喜歡,這其實是個人選擇,喜歡哪個就用哪個
如果今天要將上面改成Html Helper會長什麼樣子呢?
@Html.LabelFor(model => model.Title, new { @class = "control-label" })
@Html.TextBoxFor(model => model.Title, new { @class = "form-control" })
我個人覺得寫起來很繁瑣,這大概也就是為什麼之後會出現Tag Helper
而其他Html Helper不繁瑣的地方,似乎也剛好沒出Tag Helper,例如上一節講到的@Html.Raw
或許微軟本來就不是要完全取代Html Helper,而是把一些比較繁瑣的Html Helper,另外出一個Tag Helper寫法來取代
而Tag Helper的好處跟Html Helper也是一樣的,就是自動幫你產生對應的程式碼,防止你出錯或方便你日後的維護
再舉個例子
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="News" asp-action="Index">NewsIndex</a>
</li>
這個頂端的連結也是利用Tag Helper產生的,這時候自動幫你產生的連結會是
<a class="nav-link text-dark" href="/News">NewsIndex</a>
那自己打跟Tag Helper產生有什麼差呢?假設我今天改了一下路由設定
[HttpGet("News/abc")]
// GET: News
public async Task<IActionResult> Index()
{
}
這時就會發現連結自動改成
<a class="nav-link text-dark" href="/News/abc">NewsIndex</a>
這就是好處之一,他會幫你自動產生正確的連結,而不用自己回頭來Html修改連結
這邊算是有點拋磚引玉的講一下,還有很多功能就留給大家自己Google了,網路上很多,其實用到再看就好,我這邊就不再多講了